<template>
  <div class="login_wrap">
      <div class="login">
        <div class="logo">
          <!-- <img src="../assets/login_logo.png" alt=""> -->
          <i class="el-icon-milk-tea" style="color:orchid;font-size:86px;"></i>
        </div>
        
        <!-- 验证01：1.1 为el-form 指定 rules属性，定义验证规则、指定ref属性，好检查表单验证是否通过，ref相当于id -->
        <el-form :model="form" label-width="80px" :rules="rules" ref="loginForm">
          <!-- 验证02: 为 form-item 指prop属性，属性值为表单项值对就的对象属性名称(否则无效)-->
          <el-form-item label="用户名"  prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="pwd">
            <el-input v-model="form.pwd" placeholder="请输入密码"></el-input>
          </el-form-item>

          <el-form-item style="margin-top:35px;">
            <el-button type="primary" @click="onSubmit('loginForm')">登 录</el-button>
            <el-button @click="resetForm('loginForm')">重 置</el-button>
            <p style="color: #ffffff;font-size: 12px; opacity: 0.7;margin-top:10px;">
              没有账号 ? 立即注册 O(∩_∩)O
            </p>
          </el-form-item>

        </el-form>
    </div>
  </div>
  
</template>

<script>
  import axios from 'axios';
  // import dayjs  from 'dayjs';

  export default {
    data() {
      return {
        // 表单数据，放在一对象中，方便后面扩展
        form: {
          username: "",
          pwd:""
        },
        // 验证01：1.2 表单验证规则。 注意：username、 pwd 是与 form.username、 form.pwd一致的
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
          ],
          pwd:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 5, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      // 提交表单 方法
      // onSubmit() {
      //   console.log(this.form);
      // },

      // formName是表单的ref属性值，表单的id,可以自定义
      onSubmit(formName) {
        // 验证03:通过调用表单对象的 validate 方法，检查表单验证是否通过。

        // 获取表单对象: this.$refs[formName]
        // validate(fn)是一个函数，element 自带的，检查表单验证是否通过
        // 它的参数是一个函数，函数的参数（valid）中包含了验证情况，
        // valid true 通过，false 不通过
        this.$refs[formName].validate(async (valid) => {
          // 检查表单是否通过
          if (valid) {
            // 通过，发请求进行登录
            console.log('验证通过，准备提交数据');
            let res = await axios.post("/api/users/login",{...this.form})
            console.log(res)

            // res.data 就是接口返回的数据
            /*{
                "code": 0,
                "msg": "登录完成",
                "data": {
                    "userid": 4,
                    "user_username": "future2",
                    "status": "ok",
                    "token": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjQsInVzZXJuYW1lIjoiZnV0dXJlMiIsImlhdCI6MTczMTQ3MDgxNCwiZXhwIjoxNzMyMzM0ODE0fQ.P_CB9fGEQJsyvf6u4uOzikI9cxH5tVy1Bpn9U77HRyg"
                }
            }
           */
           // 处理请求结果
           //成功
           if(res.data.code == 0){
              // A 提示用户
              this.$message({
                message:res.data.msg,
                type: 'success'
              });
              // B 把成功后的用户信息、token（令牌）保存到本地，后面调用接口时好用
              let info = res.data.data;
              
              /*
              localStorage.setItem('uid',info.userid)
              localStorage.setItem('username',info.user_username)
              localStorage.setItem('blog_token',info.token)
              */
              //放一个对象中，只存一次就可以了
              let save_data = {
                uid:info.userid,
                username:info.user_username,
                token:info.token
              }
              localStorage.setItem('blog_users',JSON.stringify(save_data))
              localStorage.setItem("is_login",1) // 0 未登录，1登录

              // C 跳转到后台：文章管理-》文章列表
              // this.$router.push({name:"article_list"}) //article_list是路由的名称-推荐传递对象
              this.$router.push("/admin/article/list") //通过path路径字符串跳转

           }else{
              //不成功，提示用户
              this.$message({
                  message:res.data.msg,
                  type: 'warning'
              });
           }
           
          } else {
            console.log('验证不通，请重新输入');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
  };
</script>

<style lang="less" scoped>
  .login_wrap{
    width: 100vw;
    height: 100vh;
    background: url('../assets/yj.jpg');
    // background: url('../assets/jx.jpg');
    // background: url('../assets/pd.jpg');
    background-size: cover;

    .login {
      // background: #f0f2f5;
      width: 360px;
      height: 300px;
      // border: 1px solid orchid;

      position: absolute;
      top: 45%;
      left: 50%;
      margin-top: -150px;
      margin-left: -180px;

      .logo {
        width: 100px;
        height: 80px;
        margin: 20px auto;

        img{
          display: block;
          max-width: 100%;
        }
      }

      // 表单项
      // 或 ::v-deep  .el-form-item (::v-deep提供的，注意deep后观有空格)
      /deep/ .el-form-item{
        margin:26px 0;
        // 表单文字
        .el-form-item__label{
          color:#ffffff;
        }
        // 水平表单项样式
        .el-input__inner{
          color:#ffffff;
          background: transparent;

          // 表单中的placeholder
          &::placeholder{
            color:#ffffff;
            font-size:12px;
            opacity: 0.7;
          }
        }
      }
    }
  }
</style>
